<template>
    <div id="app">
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <component :is="Component" :key="$route.fullPath" />
            </transition>
        </router-view>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'App',
    created() {
        // 添加请求拦截器
        axios.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token');
                if (token) {
                    config.headers.Authorization = `Bearer ${token}`;
                }
                return config;
            },
            error => {
                return Promise.reject(error);
            }
        );

        // 添加响应拦截器
        axios.interceptors.response.use(
            response => response,
            error => {
                if (error.response && error.response.status === 401) {
                    // token过期或无效时重定向到登录页
                    this.$router.push('/login');
                }
                return Promise.reject(error);
            }
        );
    },
    watch: {
        '$route'(to, from) {
            console.log('Route changed from', from.path, 'to', to.path);
        }
    }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>